Send Multiple Attachment from Power Apps to Power Automate

This Tutorial is about sending multiple attachments from Power Apps to Power Automate without attaching your Form to SharePoint.

##Requirements

Before we can start, we need the following:

• PowerApps
• PowerAutomate

##Adding Attachment Control (Skip if you already know how to add Attachment control in your Form)

1. First, let go to https://make.powerapps.com/, then create a new Canvas App

2. On PowerApps, there is no available control for attachment. We can have an Attachment Control by connecting our Form to any SharePoint.

**Note: Feel free to connect to any site on your farm. It does not matter what list you'll use.**

3. After connecting to a SharePoint list, go to your Screen and then select Insert > Forms > Edit.’

4. It will create a Form control, try to connect that new Form control to the Sharepoint List connection we did earlier

5. Now, from here, just copy(Ctrl + C) the Attachment control that is inside the Form Control and Paste (Ctrl + V) it on your other Screen

6. After Pasting, you will now have an attachment control with errors on it(because it’s trying to find properties from its parent form control); with that, go to each error and try to clear it.

7. After resolving all errors, you should end up with Attachment control useful in your Form.

##Using now our Attachment Control and Passing the files to Power Automate

1. Now that we have an attachment control(DataCardValue1) on our Form, unfortunately, we cannot just use that and pass it on to Power Automate. We need to have many conversations about its properties before it would be helpful for Power Automate.

2. Let’s try to upload files in the Attachment control(DataCardValue1) and use the code below. I tried inserting the “Attachments” property of my Attachment control into a collection, and I ended up with the following values:

• Name - This is the filename(obviously) of the files I uploaded in the control

• Value - This string here is just a pointer in our memory; we haven’t uploaded the files in Power Apps yet, so it’s useless if we send Collection directly to Power Automates.

  Note that I added the code below in my “OnSelect” of my submit button(Blue button on the lower right corner)

"ClearCollect(attachmentControlColl,DataCardValue1.Attachments);"

3. Now that we have the file, to become useful, we need to trick the browser into uploading it somewhere, not just in memory. We can do that by using Gallery Control(Gallery1). And inside that Gallery, we need a Label control(FileNamePlaceholder) and an Image control(ImagePlaceholder)

4. Once it’s added, I suggest hiding Gallery Control(Gallery1). Because we do not need to show this control to our user

5. Now, remember earlier that we use the Submit button to fill up the values inside our Collection called attachmentControlColl, we will not use that Collection to populate our Gallery Control(Gallery1), and we can do that by changing the “Item” property of our Gallery to “attachmentControlColl”

6. Now that the Gallery Control(Gallery1) is now populated, we will assign the Label(FileNamePlaceholder) and Image(ImagePlaceholder) control inside our Gallery to the different property of our Collection (attachmentControlColl). We can do that by editing the “Fields” Property.

7. After assigning our property to the correct control, we will add more code in our Submit Button. First, we need to create a new collection, calling it “finalCollection”. Now since we load the files in our image, it’s no longer sitting in the memory of our browser. So our next step now is pulling it back to a new collection(finalCollection) to send it to Power Automate.

"Clear(finalCollection);"

ForAll(
       Gallery1.AllItems,
       Collect(
               finalCollection,
               {
                 Name: FileNamePlaceholder.Text,
                  ContentBytes : JSON(ImagePlaceholder.Image,IncludeBinaryData)
               }
      )
);

8. After creating a new collection, we will now pull the data from our Gallery Control(Gallery1) and copy it to our new Collection (finalCollection)

9. After storing it on a collection, the output would be like this.

10. Note that this Collection (finalCollection) is still ready to be sent to Power Automate. What we need to do next is do some trimming on it, so it’s on Base64

ContentBytes : Mid(JSON(ImagePlaceholder.Image,IncludeBinaryData),Find(",",JSON(Image4.Image,IncludeBinaryData))+1, Len(JSON(Image4.Image,IncludeBinaryData))-Find(",",JSON(Image4.Image,IncludeBinaryData))-1)

11. So Basically, your submit button OnSelect should look like this

12. For now, we are done with our PowerApps; we will now build our Power Automate

##Using now our Attachment Control

1. Create a blank PowerAutomate that PowerApps will trigger.

2. First is to initialize an array variable

3. After that, we need a “Parse JSON” action so that the Collection that will be coming from Power Apps could be used here in Power Automate

{
    "type": "array",
    "items": {
        "type": "object",
        "properties": {
            "Name": {
                "type": "string"
            },
            "ContentBytes": {
                "type": "string"
            }
        },
        "required": [
            "Name",
            "ContentBytes"
        ]
    }
}

4. After doing a Parse JSON, we can now use it in a loop and then using the “Convert” action, we will convert the “ContentBytes” property from Base64 to Binary using the following code

@{
base64ToBinary(items('Apply_to_each')['ContentBytes'])}

5. After doing a conversion, we will now append this value to our array along with the filename

6. After your loop, you can use this array to attach it any you like. I would be used to in the “Send an email V2” action. Note: I only use Send email action to simplify things and showcase how to send attachments in your Power Automate.

7. Now that our Power Automate WF is complete, we need to go back to our Power Apps earlier and complete our submit button by adding the “run” function to pass the “finalCollection” to Power Automate

8. After hitting the submit button, you should receive an email with an attachment on it.